<template>
  <div class="wrapper">
        <p class="title">
            <slot></slot>
        </p>
        <div class="param">
            <div>props</div>
        </div>
        <div class="param">
            <div>context</div>
            <p>可以访问的 property</p>
            <ul>
              <li>props</li>
              <li>attrs</li>
              <li>slots</li>
              <li>emit</li>
            </ul>
            <p>不能访问的选项</p>
            <ul>
                <li>data</li>
                <li>computed</li>
                <li>methods</li>
                <li>refs</li>
            </ul>
        </div>
  </div>
</template>

<script>
export default {
    name: 'Context',
    props: {
        title: { type: String , required: true }
    },
    // 使用 ES6 提供的支持对 context 进行结构
    setup( props , { attrs , slots , emit , expose } ){
        console.log( '\tprops: ' , props );
        // 非 prop attribute 可以通过 attrs 来获取
        console.log( '\tattrs: ' , attrs );
        console.log( '\tslots: ' , slots );
        console.log( '\temit: ' , emit );
        console.log( '\texpose: ' , expose );
    }
}
</script>

<style scoped>
p {
    margin: 5px auto ;
}
.wrapper {
    border: 1px solid green ;
    margin: 15px ;
    padding: 10px ;
}

.wrapper>.title {
    background: #efefef ;
}

.wrapper>div {
    margin-left: 20px ;
}

.wrapper .param>p ,
.wrapper .param>ul {
    margin-left: 20px ;
}

.wrapper .param>ul {
    margin-top: 5px ;
    margin-bottom: 5px ;
}
</style>